<template>
  <div class="view">
    <div class="search-warp">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input size="small" placeholder="用户名" clearable @clear="search" v-model="searchForm.username"/>
        </el-form-item>
        <el-form-item label="时间段">
          <el-date-picker
              size="small"
              v-model="searchForm.time"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search">查找</el-button>
        </el-form-item>
      </el-form>
    </div>
    <OperateC
            :top-level="topLevel"
            :add="addSysOpLog"
            :edit="editSysOpLog"
            :remove="removeSysOpLog"
            :add-show="this.$getButtonAuth('sysOpLog:add')"
            :remove-show="this.$getButtonAuth('sysOpLog:del:batch')"
    ></OperateC>
    <SysOpLogTable
            :top-level="topLevel"
            ref="SysOpLogTableRef"
            :edit-show="this.$getButtonAuth('sysOpLog:edit')"
            :del-show="this.$getButtonAuth('sysOpLog:del')"
    ></SysOpLogTable>
  </div>
</template>

<script>
  import OperateC from "@/components/OperateC";
  import SysOpLogTable from "@/components/table/SysOpLogTable";
  import {deleteSysOpLogByIds, getSysOpLogs} from "@/api/sysOpLog";
  export default {
    name: "SysOpLogView",
    components: { OperateC, SysOpLogTable},
    data() {
      return {
        searchForm: {
          username: "",
          time: [],
          start: null,
          end: null
        },
        topLevel: 1
      }
    },
    methods: {
      search() {
        if (this.searchForm.time.length > 0) {
          this.searchForm.start = this.searchForm.time[0]
          this.searchForm.end = this.searchForm.time[1]
        }
        this.$refs.SysOpLogTableRef.getSysOpLogs(this.searchForm)
      },
      addSysOpLog() {
        let params = {
          dialogFormVisible: true,
          dialogTitle: "添加"
        }
        this.$store.commit("sysOpLog/openDialogForm", params);
      },
      editSysOpLog() {
        let selected = this.$store.state.sysOpLog.multipleSelection;
        if (selected.length < 1) {
          this.$message.warning("你还没有选中数据哦！");
          return;
        }
        if (selected.length > 1) {
          this.$message.warning("一次只能修改一条数据哦！")
          return;
        }
        this.$store.dispatch("sysOpLog/editSysOpLog", selected[0]);
      },
      removeSysOpLog() {
        let selected = this.$store.state.sysOpLog.multipleSelection;
        if (selected.length < 1) {
          this.$message.warning("请先选择要删除的数据哦！");
          return;
        }
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSysOpLogByIds(selected).then((res) => {
            this.$message.success(res.data.msg);
            // 刷新
            let params = {
              "current": this.$store.state.sysOpLog.currentPage,
              "size": this.$store.state.sysOpLog.pageSize
            };
            getSysOpLogs(params).then((res) => {
              this.$store.state.sysOpLog.tableData = res.data.data;
              this.$store.state.sysOpLog.total = res.data.total;
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    }
  }
</script>

<style scoped>

</style>
